<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../../css/gwc.css" />
		<link href="css/main.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script> 
		<script src="../../js/ajax.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function(){
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
				
			});
			
		</script>
	</head>
	<body>
		<div id="app">
			<header>
				<div id="top">
					<span id="topCar">购物车</span>
					<span id="topClean">
						<van-button id="empty" size="small" round   @click="onClickRight">清空购物车</van-button>
					</span>
				</div>
			</header>
			<section style="margin-top: 60px;">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<van-row>
					<!--购物车无商品 -->
						<div v-show="isShow" id="null">
							<div style="text-align: center;color: #C9C9C9;font-size: 30px;margin-top: 200px;">
								<van-icon name="cart" />
							</div>
							<div style="color:#C9C9C9 ;text-align: center;">购物车空空如也</div>
						</div>
					<!--购物车有商品 -->
						<div v-if="isShow==false" id="full">
							<div v-for="(item,index) in shops">
								<van-col span="4">
									  <van-checkbox v-model="item.checked" :value="item.id" @change="select(item.id,item.Price,item.num,item.checked)" style="margin-top: 50%; text-align: center;"></van-checkbox>
								</van-col>
								<van-col span="20">
									<van-card
									  :num="item.num"
									  :price="item.price"
									  :title="item.title"
									>
										<div slot="thumb">
											<img src="item.src" onerror="this.src='../../img/520.jpg'"/>
										</div>
										<div slot="footer">
											<van-button class="btn" size="mini" @click="minus(item.id,item.num)">-</van-button>
											<van-button class="btn" size="mini" @click="add(item.id,item.num)">+</van-button>
											<van-button class="btn" size="mini" @click="del(item.id)"><van-icon name="delete"/></van-button>
										</div>
									</van-card>
								</van-col>
							</div>
						</div>
				</van-row>
				</van-pull-refresh>	
			</section>
			<footer>
				<van-row>
					<van-col span="24" >
						<van-submit-bar :price="totalprice*100" @submit="buy"  button-text="提交订单">
							 <van-checkbox style="margin-left: 25px;" v-model="checked" @change="selectAll" style="margin-top: 20px; margin-left: 2%;">全选</van-checkbox>
						</van-submit-bar>
					</van-col>
				</van-row>
			</footer>
		</div>
		<script type="text/javascript">
			var user=JSON.parse(plus.storage.getItem('user'));
			var list=JSON.parse(plus.storage.getItem(user.UserData.Phone));//获取到用户的购物车
			var vm=new Vue({
				el:"#app",
				data:{
					shops:[],//商品信息
					checked:"",
					checkedData: [],
					isShow:false,//购物车，为true时显示购物车为空
					finished: false,//刷新
					isLoading: false//刷新
					
				},
				computed:{//计算属性
					totalprice(){
						var money = 0;
							if(this.isShow==true){//解决清空购物车时的bug
								return money;
							}
							for(var i = 0; i < this.shops.length; i++) {
								if(this.shops[i].checked) {
									money+= this.shops[i].price * this.shops[i].num;
								}
							}
							return money;
					}
				},
				methods: {
						onRefresh: function() {//刷新						
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},
					buy(){//提交订单
						if (user == null) {//用户为空时
							this.$toast('你还没登陆呢！');
							return;
						}
						else{
							
						}
						var fast = plus.webview.create("../pay.html", "id", {}, {
							shopIds:vm.checkedData,//传的复选框选中的shopid  和商品数量
							viewtype:false,//购物车的类型
							sumprice:_this.totalprice//传过去总价
						});
						plus.webview.show(fast);
					},
					del(id){//删除单个商品
						this.$dialog.confirm({
						  title: '是否删除商品',
						  message: ''
						}).then(() => {
							for(var i = 0; i < list.length; i++) { //遍历所以商品
								if(list[i].goodsId == id) {//得到的商品id
									list.splice(i, 1); //删除此商品
									plus.storage.setItem(user.UserData.Phone, JSON.stringify(list));
									//刷新页面
									var viewshop = plus.webview.currentWebview();
									viewshop.reload();
									vm.d.splice(i, 1);
									vm.$toast.fail("已删除");
								}
							}
						}).catch(() => {
						   vm.$toast.fail('删除完成!');
						});
					},
					select:function(id,price,num,check){//复选框改变时
						if(check) {
							var cd = {
								goodsId: id,
								buyCount: num
							}
							this.checkedData = this.checkedData.concat(cd)
						} else {
							for(var i = 0; i < this.checkedData.length; i++) {
								if(this.checkedData[i].goodsId == id) {
									this.checkedData.splice(i, 1);
								}
							}
						}
					},
					selectAll(){//获取全部
						for(var i = 0; i < this.shops.length; i++) {
							this.shops[i].checked = this.checked;
						}
					},
					add(id,num){//添加数量
						for(var i=0;i<this.shops.length;i++)
						{
							if(this.shops[i].id==id){
								this.shops[i].num++;
							}
						}
					},
					minus(id,num){//减少数量
						for(var i=0;i<this.shops.length;i++)
						{
							if(this.shops[i].id==id&&this.shops[i].num!=1){
								this.shops[i].num--;
							}
						}
					},
					onClickRight:function() {//清空购物车
						this.$dialog.confirm({
						  title: '是否清空购物车',
						  message: ''
						}).then(() => {
							shops=[],
							plus.storage.removeItem(user.UserData.Phone);//删除本地 储存
							vm.$toast.success('清空成功!');
							this.isShow=true;//清空时
						}).catch(() => {
						  // on cancel
						   vm.$toast.fail('清空取消!');
						});
					},
				},
				created:function(){
					_this=this;
					for(var i=0;i<list.length;i++)
					{
						if(list[i].goodsId==null){
							console.log("下标"+i+"没用");
						}else{
							ajax({
								url:'http://dsapi.ysd3g.com/API/GoodsDetail',
								dataType:'jsonp',
								data:{
									gId:list[i].goodsId,
								},
								success:function(res){
									var obj={
										id:'',
										checked: 0,
										src:'',
										num: '',
										price:"",
										title:"",
									};
									obj.id=res.Detail.Id;
									obj.src=res.Detail.CoverImage;
									obj.price=res.Detail.RealPrice;
									obj.title=res.Detail.Name;
									_this.shops.push(obj);
									for(var j = 0; j < list.length; j++) {
											if(obj.id== list[j].goodsId) {
												obj.num = list[j].buyCount;
												console.log(obj.num);
											}
									}
								}
							});
						}
					}
					console.log(_this.shops);
				}
			})
			
		</script> 
	</body>
</html>
